<template>
  <div class="settings-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>系统设置</span>
        </div>
      </template>
      
      <el-tabs v-model="activeTab">
        <el-tab-pane label="基础设置" name="basic">
          <el-form :model="basicForm" label-width="120px">
            <el-form-item label="系统名称">
              <el-input v-model="basicForm.systemName" />
            </el-form-item>
            <el-form-item label="系统描述">
              <el-input v-model="basicForm.systemDesc" type="textarea" />
            </el-form-item>
            <el-form-item label="客服电话">
              <el-input v-model="basicForm.servicePhone" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="邮件设置" name="email">
          <el-form :model="emailForm" label-width="120px">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailForm.smtpHost" />
            </el-form-item>
            <el-form-item label="SMTP端口">
              <el-input v-model="emailForm.smtpPort" />
            </el-form-item>
            <el-form-item label="发送邮箱">
              <el-input v-model="emailForm.fromEmail" />
            </el-form-item>
            <el-form-item label="邮箱密码">
              <el-input v-model="emailForm.password" type="password" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">保存设置</el-button>
              <el-button @click="testEmail">测试邮件</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        
        <el-tab-pane label="支付设置" name="payment">
          <el-form :model="paymentForm" label-width="120px">
            <el-form-item label="微信支付AppID">
              <el-input v-model="paymentForm.wechatAppId" />
            </el-form-item>
            <el-form-item label="微信支付密钥">
              <el-input v-model="paymentForm.wechatSecret" type="password" />
            </el-form-item>
            <el-form-item label="支付宝AppID">
              <el-input v-model="paymentForm.alipayAppId" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="savePaymentSettings">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')

const basicForm = reactive({
  systemName: '餐饮点餐系统',
  systemDesc: '专业的餐饮点餐管理平台',
  servicePhone: '400-123-4567'
})

const emailForm = reactive({
  smtpHost: 'smtp.qq.com',
  smtpPort: '587',
  fromEmail: 'service@example.com',
  password: ''
})

const paymentForm = reactive({
  wechatAppId: '',
  wechatSecret: '',
  alipayAppId: ''
})

const saveBasicSettings = () => {
  ElMessage.success('基础设置保存成功')
}

const saveEmailSettings = () => {
  ElMessage.success('邮件设置保存成功')
}

const savePaymentSettings = () => {
  ElMessage.success('支付设置保存成功')
}

const testEmail = () => {
  ElMessage.success('测试邮件发送成功')
}
</script>

<style scoped>
.settings-page {
  padding: 0;
}
</style>